<template>
	<view>
		<!-- 条件渲染 -->
		<view class="" v-if="false">
			123
		</view>
	
		<view class="" v-show="false">
			111111
		</view>
		<!-- 过滤器 -->
		<view class="">
			-------------------------------------
		</view>
		<view v-for="(item,index) in list" :key="index">
			{{ item | filterAge }}
		</view>
		<view class="">
				------------------------------------
		</view>
		<!-- 计算属性 -->
		<view class="">
			{{ count }}-----{{douCount}}
		</view>
		<button @click="addCount(1)">+1</button>
		<button @click="addCount(10)">+10</button>
		<button @click="addCount(100)">+100</button>
		<!-- 侦听器 -->
		<view class="">
			{{ obj.name[0].age }}
		</view>
		<button @click="obj.name[0].age++">+1</button>
	</view>
</template>

<script>
	export default {
		filters: {
			filterAge(age) {
				if(age > 18) return "";
				return age
			}
		},
		watch: {
			count: {
				handler(count) {
					console.log('count: ', count)
				},

				// 立即执行
				immediate: true
			},
			obj: {
				handler(obj) {
					console.log("obj:  ", obj)
				},
				// 深度监听
				deep: true
			}
		},
		computed: {
			douCount: {
				get() {
					return this.count * 2
				},
			}
		},
		data() {
			return {
				count: 1,
				obj: {
					name: [{
						age: 18
					}]
				},
				list: [1, 2, 3, 4, 15, 20, 30, 50, 7, 9]
			}
		},
		methods: {
			addCount(count = 1) {
				this.count+= count
			}
		}
	}
</script>

<style>

</style>